<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>数据预览</title>
</head>

<style>
    #top {
        width: auto;
        overflow: hidden;
        text-align: center;
    }

    .btn-grad-sum {
        background-image: linear-gradient(to right, #1CD8D2 0%, #93EDC7 51%, #1CD8D2 100%);
        margin: 10px;
        padding: 55px 200px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 20px #eee;
        border-radius: 10px;
        display: inline-block;
    }

    .btn-grad-sum:hover {
        background-position: right center;
        /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }


    .btn-grad-risk {
        background-image: linear-gradient(to right, #B993D6 0%, #8CA6DB 51%, #B993D6 100%);
        margin: 10px;
        padding: 55px 200px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 20px #eee;
        border-radius: 10px;
        display: inline-block;
    }

    .btn-grad-risk:hover {
        background-position: right center;
        /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }

    .txt {
        font-size: 54px;
    }
</style>
<?php
require_once 'mysql.php';
require_once 'check.php';  //导入key检测函数
class check extends Check_key
{
    public function check_key()
    {
        return parent::check_key();
    }
}
class statistics extends MySQL
{
    # 连接Mysql数据库
    function connect()
    {
        $conn = parent::connect();
        return $conn;
    }

    //返回最新记录及统计信息
    public function statistics($ID)
    {
        $conn = $this->connect();
        // 执行查询的代码
        $table = $ID . '_location';
        //注意，此处未限制日期为今日
        $sql = "SELECT DATE_FORMAT(date, '%Y-%m-%d') as today,Risk,date,(SELECT count(*) FROM $table) as sum FROM $table ORDER BY date DESC LIMIT 1;";
        // echo $sql;
        $result = $conn->query($sql);
        if ($result->num_rows > 0) {
            // 输出数据
            while ($row = $result->fetch_assoc()) {
                $sum = $row['sum'];
                $risk = $row['Risk'] * 100;
                $date = $row['date'];
                $today = $row['today'];
                echo <<<FFF
                <body>
                <div id="top">
                    <div class="btn-grad-sum">
                    <p>今日统计<span class="txt">$sum</span>次</p>
                    <p>统计于$today</p>
                </div>
                <div class="btn-grad-risk">
                    <p>当前风险值<span class="txt">$risk%</span></p>
                    <p>更新时间:$date</p>
                </div>
        FFF;
            }
        }else{
            echo <<<FFF
                <body>
                <div id="top">
                    <div class="btn-grad-sum">
                    <p>今日统计<span class="txt">0</span>次</p>
                    <p>无相关数据，以下展示模拟数据</p>
                </div>
                <div class="btn-grad-risk">
                    <p>当前风险值<span class="txt">0%</span></p>
                    <p>更新时间:------</p>
                </div>
        FFF;
        }
        $conn->close();
    }
}
$check = new check();
$ID = $check->check_key();
if ($ID != false) {
    $db = new statistics;
    $db->statistics($ID);
    echo <<<EOF
    </div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width:80%;height:400px;margin: 0 auto"></div>
    <!-- ;margin-top:80px;控制距离顶部距离 -->
    <div id="main2" style="width:80%;height:400px;margin: 0 auto"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function(ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                var myChart2 = ec.init(document.getElementById('main2'));

                var option = { //具体细节的描述
                    title: {
                        text: '风险值变动',
                        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'bold',
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['风险值']
                    },
                    toolbox: { //可以选择具体数据，柱状图，折线图，还原，保存图片的的切换选择
                        show: true,
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ['line', 'bar'] //可选折线图和柱状图
                            },
                            restore: {
                                show: true //恢复默认
                            },
                            saveAsImage: {
                                show: true // 存储为图片的功能
                            }
                        }
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        //name: 'min_sup(%)'
                        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00'],
                        name: 'date',
                        position: 'left'
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '风险值',
                        position: 'left'
                    }],
                    series: [{
                            name: '风险',
                            type: 'line', // bar
                            data: [0.1, 0.2, 0.34, 0.1, 0.43, 0.1, 0.67, 0.1, 0.9, 0.1],
                            color: '#CC0066'
                        },

                    ]
                };

                var option2 = {
                    title: {
                        text: '时间段统计次数',
                        textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                            fontSize: 14,
                            fontStyle: 'normal',
                            fontWeight: 'bold',
                        },
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['风险值']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },

                            magicType: {
                                show: true,
                                type: ['line', 'bar']
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                show: true
                            }
                        }
                    },
                    calculable: true,
                    xAxis: [{
                        type: 'category',
                        //name: 'min_sup(%)'
                        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
                        name: 'min_sup(%)',
                        position: 'left'
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '风险值',
                        position: 'left'
                    }],
                    series: [{
                            name: '平均统计',
                            type: 'bar',
                            data: [0.01, 0.01, 0.23, 0.45, 0.76, 0.2, 0.01],
                            color: '#CC0066'
                        },

                    ]
                };
                // 为echarts对象加载数据 
                myChart.setOption(option);
                myChart2.setOption(option2);
            }
        );
    </script>
</body>
EOF;
}
?>